<template>
	<view>

		<view class="top-bg">
			<view style="display: flex;align-items: baseline;">
				<text class="o-state">{{orderListBean.orderCarStatusStr|filterNull}}</text>

			</view>
			<!-- <text class="o-remark" v-if="orderListBean.approveDesc">{{orderListBean.approveDesc}}</text> -->
			<text class="o-remark" v-if="model.bizData.auditMark">{{model.bizData.auditMark}}</text>
		</view>

		<view class="item" id="carOrderInfo" v-if="showCarOrderInfo">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="车辆订单信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;"></text>
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line" v-if="viewStateBean.code[0]">
				<text class="text-name">车辆订单号:</text>
				<text class="text-value">{{model.bizData.plan.orderCarCode|filterNull}}</text>

				<text v-if="model.bizData.customerType"
					style="align-self: flex-end;color: white;font-size: 22rpx;padding: 5rpx 10rpx;background-color: #FFC500;border-radius: 50rpx 0 0 50rpx;"
					:style="{'background-color':1==model.bizData.customerType?'#1573FF':'#FFC500'}">{{1==model.bizData.customerType?'企业':2==model.bizData.customerType?'个人':''}}</text>

			</view>

			<view class="text-line" v-if="viewStateBean.rentType[0]">
				<text class="text-name">租赁类型:</text>
				<text class="text-value">{{1==model.bizData.plan.rentType?'经租':
				2==model.bizData.plan.rentType?'以租代购':
				3==model.bizData.plan.rentType?'展示车':
				4==model.bizData.plan.rentType?'试驾车':
				5==model.bizData.plan.rentType?'融租':
				6==model.bizData.plan.rentType?'直购':'--'}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.customerName[0]">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{model.bizData.customerName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.customerTel[0]" @click="makecall(model.bizData.customerTel)">
				<text class="text-name">联系电话:</text>
				<text class="text-value" style="flex-grow: unset;">{{model.bizData.customerTel|filterNull}}</text>
				<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" src="../../static/common/callPhone.png"
					mode="scaleToFill"></image>

			</view>

			<view class="text-line" v-if="viewStateBean.lessorId[0]">
				<text class="text-name">出租方:</text>
				<text class="text-value">{{model.bizData.lessorName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.selectCarModel[0]">
				<text class="text-name">品牌/车系/车型:</text>
				<text class="text-value">{{model.bizData.plan.brandName|filterNull}}/{{model.bizData.plan.seriesName|filterNull}}/{{model.bizData.plan.modelName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.timeStartRent[0]">
				<text class="text-name">租赁时间:</text>
				<text class="text-value" v-if="1==model.bizData.plan.tenancyType">{{model.bizData.plan.timeStartRent|filterNull}}-{{model.bizData.plan.timeFinishRent|filterNull}}</text>
				<text class="text-value" v-else>{{model.bizData.plan.tenancy|filterNull}}月</text>
			</view>

			<view class="text-line" v-if="viewStateBean.repaymentMethods[0]">
				<text class="text-name">还款方式:</text>
				<text class="text-value">{{1==model.bizData.plan.paymentMethod?'月付':
				2==model.bizData.plan.paymentMethod?'两月付':
				3==model.bizData.plan.paymentMethod?'季度':
				4==model.bizData.plan.paymentMethod?'年付':
				5==model.bizData.plan.paymentMethod?'一次性结清':
				7==model.bizData.plan.paymentMethod?'日付':
				8==model.bizData.plan.paymentMethod?'周付':
				'--'}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.paymentDay[0]">
				<text class="text-name">还款日:</text>
				<text class="text-value">每月{{model.bizData.plan.paymentDay|filterNull}}号</text>
			</view>

			<view class="text-line" v-if="viewStateBean.timeRepayment[0]">
				<text class="text-name">还款时间:</text>
				<text class="text-value">{{model.bizData.orderCar.timeRepayment|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.freeDays[0]">
				<text class="text-name">免费用车天数:</text>
				<text class="text-value">{{model.bizData.plan.freeDays|filterNull}}天</text>
			</view>

			<view class="text-line" v-if="viewStateBean.coverCharge[0]">
				<text class="text-name">服务费:</text>
				<text class="text-value">¥{{model.bizData.plan.coverCharge|filterNull}}</text>
			</view>

			<!-- <view class="text-line" v-if="5==model.order.rentType">
				<text class="text-name">金融公司名称:</text>
				<text class="text-value">{{model.order.financeCompanyName|filterNull}}</text>
			</view> -->

			<view class="text-line" v-if="viewStateBean.chlRebate[0]">
				<text class="text-name">渠道返利:</text>
				<text class="text-value">¥{{model.bizData.plan.chlRebate|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.insuranceItems[0]">
				<text class="text-name">车辆已购保险:</text>
				<text class="text-value">{{model.bizData.plan.insuranceItems|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.orderDesc[0]">
				<text class="text-name">订单备注:</text>
				<text class="text-value">{{model.bizData.orderCar.orderDesc|filterNull}}</text>
			</view>

			<view style="display: flex;flex-direction: column;" v-if="viewStateBean.orderFile[0]">
				<view class="text-line">
					<text class="text-name">订单附件:</text>
					<text class="text-value" v-if="model.bizData.orderCar.orderFileLst && model.bizData.orderCar.orderFileLst.length<=0">--</text>
				</view>
				
				<picPdf :attachment="model.bizData.orderCar.orderFileLst"></picPdf>
			</view>
			

			<view class="text-line" v-if="viewStateBean.cashDeposit[0]">
				<text class="text-name">{{1==model.bizData.plan.rentType||3==model.bizData.plan.rentType||4==model.bizData.plan.rentType?'保证金/元/台:':
				2==model.bizData.plan.rentType?'整备费/元/台:':
				5==model.bizData.plan.rentType?'首付款/元/台:':
				6==model.bizData.plan.rentType?'车辆总单价/元/台:':''
				}}</text>
				<text class="text-value">{{(1==model.bizData.plan.rentType||3==model.bizData.plan.rentType||4==model.bizData.plan.rentType?model.bizData.plan.cashDeposit:
				2==model.bizData.plan.rentType?model.bizData.plan.servicingFee:
				5==model.bizData.plan.rentType?model.bizData.plan.downPayment:
				6==model.bizData.plan.rentType?model.bizData.plan.totalPrice:'--')|filterNull
				}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.downPayment[0]">
				<text class="text-name">月租/元/台:</text>
				<text class="text-value">{{model.bizData.plan.monthlyRent|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.hasBalancePayment[0]" v-for="(fItem, fIndex) in model.bizData.plan.balancePaymentLst" :key="fIndex">
				<text class="text-name">尾款:</text>
				<text class="text-value">¥{{fItem.money|filterNull}}</text>
			</view>

		</view>
		

		<view class="item" id="carInfo" v-if="showCarInfo">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="车辆信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;"></text>
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line" v-if="viewStateBean.vinNo[0]">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{model.bizData.orderCar.vinNo|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.carNo[0]">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{model.bizData.orderCar.carNo|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.deptName[0]">
				<text class="text-name">车辆归属:</text>
				<text class="text-value">{{model.bizData.orderCar.deptName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.depotName[0]">
				<text class="text-name">车辆仓库:</text>
				<text class="text-value">{{model.bizData.orderCar.depotName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.accessoryItems[0]">
				<text class="text-name">随车物品:</text>
				<text class="text-value">{{model.bizData.orderCar.accessoryItemsName|filterNull}}</text>
			</view>

			<view class="text-line" v-if="viewStateBean.carDesc[0]">
				<text class="text-name">车辆备注:</text>
				<text class="text-value">{{model.bizData.orderCar.carDesc|filterNull}}</text>
			</view>

		</view>
		
		<view class="item" style="padding: 20rpx 30rpx 0;margin-top: 10rpx;" id="examInfo" v-if="showExamInfo">
		
			<u-form :model="model.bizData" ref="uform" label-width="auto">
		
				<view style="height: 50rpx;display: flex;align-items: center;">
					<u-icon name="order" color="#1573FF" label="审核确认" label-color="#333333"></u-icon>
				</view>
		
				<u-form-item label="请选择订金是否已交" label-width="230" v-if="viewStateBean.isDepositPaid[0]" :required="viewStateBean.isDepositPaid[2]" borderBottom>
					
					<u-radio-group :disabled="!viewStateBean.isDepositPaid[1]"
						v-model="model.bizData.customFieldMap.isDepositPaid">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
		
				<u-form-item label="请选择是否已上牌" label-width="230" v-if="viewStateBean.isCarNoRegistered[0]" :required="viewStateBean.isCarNoRegistered[2]" borderBottom>
					
					<u-radio-group :disabled="!viewStateBean.isCarNoRegistered[1]"
						v-model="model.bizData.customFieldMap.isCarNoRegistered">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
		
				<u-form-item label="请选择保险是否已确认" label-width="230" v-if="viewStateBean.isInsuranceConfirmed[0]" :required="viewStateBean.isInsuranceConfirmed[2]" borderBottom>
					
					<u-radio-group :disabled="!viewStateBean.isInsuranceConfirmed[1]"
						v-model="model.bizData.customFieldMap.isInsuranceConfirmed">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
		
				<u-form-item label="请选择合同是否已确认" label-width="230" v-if="viewStateBean.isContractConfirmed[0]" :required="viewStateBean.isContractConfirmed[2]" borderBottom>
					
					<u-radio-group :disabled="!viewStateBean.isContractConfirmed[1]"
						v-model="model.bizData.customFieldMap.isContractConfirmed">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
		
				<u-form-item label="请确认财务是否已收款确认" label-width="230" v-if="viewStateBean.isReceivedPayment[0]" :required="viewStateBean.isReceivedPayment[2]" borderBottom>
					
					<u-radio-group :disabled="!viewStateBean.isReceivedPayment[1]"
						v-model="model.bizData.customFieldMap.isReceivedPayment">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				
				<u-form-item v-if="viewStateBean.paymentMethod[0]" :required="viewStateBean.paymentMethod[2]" label="收款方式" borderBottom>
					<u-input v-model="model.bizData.customFieldMap.paymentMethod" disabledColor="#ffffff" :disabled="!viewStateBean.paymentMethod[1]" inputAlign="right" placeholder="请输入" border="none"></u-input>
				</u-form-item>
				
				<u-form-item v-if="viewStateBean.collectBalance[0]" :required="viewStateBean.collectBalance[2]" label="待收尾款(元)" borderBottom>
					<u-input v-model="model.bizData.customFieldMap.collectBalance" disabledColor="#ffffff" :disabled="!viewStateBean.collectBalance[1]" type="digit" inputAlign="right" placeholder="请输入" border="none"></u-input>
				</u-form-item>
				
				<u-form-item v-if="viewStateBean.loanAmount[0]" :required="viewStateBean.loanAmount[2]" label="放款金额(元)" borderBottom>
					<u-input v-model="model.bizData.customFieldMap.loanAmount" disabledColor="#ffffff" :disabled="!viewStateBean.loanAmount[1]" type="digit" inputAlign="right" placeholder="请输入" border="none"></u-input>
				</u-form-item>

			</u-form>
			
		</view>
		
		<!-- <examflow :from="pageType" :instanceId="instanceId" approvalName="carRepairApprove" :isAdd="false"></examflow> -->
		<examFlow :listData="model.bizData.bpmChartDtoList" :isForceShow="true"></examFlow>
		
		<view style="height: 200rpx;"></view>
		
		<view class="button-container" v-if="model.buttonList&&model.buttonList.length>0">
			<button class="btn-item" v-for="(bitem, bindex) in model.buttonList" :key="bindex" @click="bottomClick(bitem)">{{bitem.btnName}}</button>
		</view>

	</view>
</template>

<script>
	import picPdf from '@/components/pic-pdf.vue';
	import examFlow from '@/components/exam-flow.vue';

	export default {
		components: {
			picPdf,
			examFlow
		},
		data() {
			return {
				orderListBean: {},
				model: {
					bizData:{
						plan:{},
						orderCar:{},
						bpmChartDtoList:[],
						customFieldMap:{}
					},
					buttonList:[],
					list:[],
				},
				activitiEnable:{},
				bizType:'-1',
				viewStateBean:{
					code:[true, false, false],
					rentType:[true, false, false],
					customerName:[true, false, false],
					customerTel:[true, false, false],
					lessorId:[true, false, false],
					selectCarModel:[true, false, false],
					timeStartRent:[true, false, false],
					repaymentMethods:[true, false, false],
					paymentDay:[true, false, false],
					freeDays:[true, false, false],
					coverCharge:[true, false, false],
					chlRebate:[true, false, false],
					insuranceItems:[true, false, false],
					orderDesc:[true, false, false],
					cashDeposit:[true, false, false],
					downPayment:[true, false, false],
					monthlyRent:[true, false, false],
					timeRepayment:[true, false, false],
					orderFile:[true, false, false],
					hasBalancePayment:[true, false, false],
					vinNo:[true, false, false],
					carNo:[true, false, false],
					deptName:[true, false, false],
					depotName:[true, false, false],
					accessoryItems:[true, false, false],
					carDesc:[true, false, false],
					isDepositPaid:[true, false, false],
					isCarNoRegistered:[true, false, false],
					isInsuranceConfirmed:[true, false, false],
					isContractConfirmed:[true, false, false],
					isReceivedPayment:[true, false, false],
					paymentMethod:[true, false, false],
					collectBalance:[true, false, false],
					loanAmount:[true, false, false],
					
				},
				showCarOrderInfo:true,
				showCarInfo:true,
				showExamInfo:true,
			}
		},
		methods: {
			
			makecall(phone) {
				if (!uni.$u.test.isEmpty(phone)) {
					uni.makePhoneCall({
						phoneNumber: phone
					})
				}
			},
			
			//底部按钮点击
			bottomClick(item){
				
				this.model.bizData.orderCar.orderId=!uni.$u.test.isEmpty(this.orderListBean)?this.orderListBean.orderId:''
				
				//提单审核通过:302
				//提单审核驳回:303
				//提单审核拒绝:304
				//提单审核撤回:305
				//提单审核删除:306
				//提单审核详情(订单是审核中，拒绝等操作):307
				//提单驳回重新编辑:308
				//提单无工作流：
				//提交 10
				//暂存 9

				//type 1拒绝  2驳回   3列表直接通过    4编辑后通过  5撤回   6删除   7审核页面直接通过
				switch(item.btnKey){
					case '302':
					
						//审核模块
						if(this.viewStateBean.isDepositPaid[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.isDepositPaid)){
							this.$u.toast('请选择订金是否已交')
							return
						}
						
						if(this.viewStateBean.isCarNoRegistered[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.isCarNoRegistered)){
							this.$u.toast('请选择是否已上牌')
							return
						}
						
						if(this.viewStateBean.isInsuranceConfirmed[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.isInsuranceConfirmed)){
							this.$u.toast('请选择保险是否已确认')
							return
						}
						
						if(this.viewStateBean.isContractConfirmed[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.isContractConfirmed)){
							this.$u.toast('请选择合同是否已确认')
							return
						}
						
						if(this.viewStateBean.isReceivedPayment[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.isReceivedPayment)){
							this.$u.toast('请确认财务是否已收款确认')
							return
						}
						
						if(this.viewStateBean.paymentMethod[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.paymentMethod)){
							this.$u.toast('请输入收款方式')
							return
						}
						
						if(this.viewStateBean.collectBalance[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.collectBalance)){
							this.$u.toast('请输入待收尾款')
							return
						}
						
						if(this.viewStateBean.loanAmount[2] && uni.$u.test.isEmpty(this.model.bizData.customFieldMap.loanAmount)){
							this.$u.toast('请输入放款金额')
							return
						}
						
						getApp().globalData.exam_order = this.model.bizData
						
						uni.redirectTo({
							url: '/pagesB/exam-order/exam-order?type=7&orderId=' + this.model.bizData.orderCar.orderId
						})
						break
					case '303':
						uni.navigateTo({
							url: '/pagesB/exam-order/exam-order?type=2&orderId=' + this.model.bizData.orderCar.orderId
						})
						break
					case '304':
						uni.navigateTo({
							url: '/pagesB/exam-order/exam-order?type=1&orderId=' + this.model.bizData.orderCar.orderId
						})
						break
					case '305':
						uni.navigateTo({
							url: '/pagesB/exam-order/exam-order?type=5&orderId=' + this.model.bizData.orderCar.orderId
						})
						break
					case '306':
						uni.redirectTo({
							url: '/pagesB/exam-order/exam-order?type=6&orderId=' + this.model.bizData.orderCar.orderId
						})
						break
					case '308':
						uni.navigateTo({
							url: '/pagesB/addorder/addorder-workflow?orderId=' + this.model.bizData.orderCar.orderId
							+'&customFieldMapBean='+uni.$u.queryParams(this.model.bizData.customFieldMap) 
						})
						break
				}
			},
			
			getData(){
				if (!uni.$u.test.isEmpty(this.orderListBean)) {
				
					this.$u.api.orderAuditData({
						orderId: this.orderListBean.orderId,
						bizType: this.bizType
					}).then(res => {
						this.model = res;
						
						//处理动态数据
						this.setViewState();
					})
				}
			},
			
			setViewState(){
				let that = this
				
				//处理动态数据
				if(!uni.$u.test.isEmpty(that.model.list)){
					for (let module of that.model.list) {
						switch(module.moduleInfo){
							case 'billLading':
								//提单
								for(let field of module.fields){
									if('paymentMethod'==field.fieldInfo){
										that.viewStateBean.repaymentMethods=[!field.hide, field.edit, field.required]
									}else{
										that.viewStateBean[field.fieldInfo]=[!field.hide, field.edit, field.required]
									}
								}
								break
							case 'vehicleBusiness':
								//车辆
								for(let field of module.fields){
									
									that.viewStateBean[field.fieldInfo]=[!field.hide, field.edit, field.required]
									
								}
								break
							case 'customField':
								//审核相关
								for(let field of module.fields){
									
									that.viewStateBean[field.fieldInfo]=[!field.hide, field.edit, field.required]
									
								}
								break
						}
					}
				}
				
				this.$forceUpdate()
				
				console.log('that.viewStateBean=============>', that.viewStateBean);
				
				const query = uni.createSelectorQuery().in(this);
				
				setTimeout(()=>{
					
					query.select('#carOrderInfo').boundingClientRect(data => {
						console.log("carOrderInfo得到布局位置信息" + JSON.stringify(data));
						that.showCarOrderInfo = data.height>43
					}).exec();
					
					query.select('#carInfo').boundingClientRect(data => {
						console.log("carInfo得到布局位置信息" + JSON.stringify(data));
						that.showCarInfo = data.height>66
					}).exec();
					
					query.select('#examInfo').boundingClientRect(data => {
						console.log("examInfo得到布局位置信息" + JSON.stringify(data));
						that.showExamInfo = data.height>43
					}).exec();
					
				}, 1500)
				
			},
			
		},
		onLoad(op) {
			this.bizType = uni.$u.test.isEmpty(op.bizType)?'-1':op.bizType
			this.orderListBean = getApp().globalData.orderListBean
			this.activitiEnable = this.$store.state.params.activitiEnable
			
			getApp().globalData.orderListBean = null
		},
		onShow() {
			this.getData()
		},
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		display: flex;
		flex-direction: column;
		background-color: #1573FF;
	}

	.o-state {
		font-size: 40rpx;
		color: #fff;
		margin: 38rpx 0 20rpx 36rpx;
		flex: 1;
	}

	.o-remark {
		font-size: 24rpx;
		color: #FFC500;
		margin: 0 0 40rpx 36rpx;
	}

	.o-more {
		font-size: 28rpx;
		color: #fff;
		margin-right: 20rpx;
	}
	
</style>
